---
import Layout from '@layouts/Layout.astro';
import { getEntry, type CollectionEntry } from 'astro:content';
import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
import { DocsNavFromLocalStorage } from '@ag-website-shared/components/docs-navigation/DocsNavFromLocalStorage';
import styles from '@ag-website-shared/components/page-styles/docs.module.scss';

const { data: docsNavData } = (await getEntry('docsNav', 'nav')) as CollectionEntry<'docsNav'>;
---

<Layout title="AG Grid: Page Not Found" showDocsNav={true} showSearchBar={true}>
    <div class="layout-grid">
        <!-- NOTE: 404 is used for all paths, so will need to get framework from localstorage -->
        <DocsNavFromLocalStorage client:load menuData={docsNavData} pageName={'404'} />

        <div id="doc-content" class:list={[styles.docPage, styles.noSideMenu]}>
            <h1>Page Not Found</h1>
            <p>
                Sorry, but it looks like you've ended up in the wrong place. Please go to the <a
                    href={urlWithBaseUrl('/')}>homepage</a
                > or <a href={urlWithBaseUrl('/documentation')}>documentation</a> to try to find what you're looking for.
            </p>
        </div>
    </div>
</Layout>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (!window.plausible) {
            return;
        }

        window.plausible('404', { props: { path: document.location.pathname } });
    });
</script>
